<template>
	<view class="container">
		<skeleton :loading="loading" type="text" width="200px" />
		<skeleton :loading="loading" type="list-item" />
		<skeleton :loading="loading" type="paragraph" :rows="4" />
		<skeleton :loading="loading" type="card" />
		<skeleton :loading="loading" :animate="true">
			<template #custom>
				<view
					style="height: 120px; background: #f0f0f0; border-radius: 8px"
				></view>
			</template>
			<template #content>
				<!-- 真实内容 -->
				<view>相关内容</view>
			</template>
		</skeleton>
	</view>
</template>

<script>
import useStore from '@/store/index';
import Skeleton from '@/components/Skeleton/Skeleton.vue';
export default {
	name: 'CustomSkeleton',
  components: { Skeleton },
  mounted() {
    this.init();
  },
	data() {
		return {
			loading: true,
		};
	},
  methods: {
    init() {
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
}
</style>
